<!--导入群发短信 详情（右侧）-->
<template>
  <div class="si-detail" v-loading="loading">
    <el-tabs v-model.trim="activeName" @tab-click="handleClick" v-if="!loading">
      <div style="border-bottom: 1px solid #d9d9d9;padding: 10px">{{$t('configLazyLoad.customerConfig.batchNumber')}}{{id}}</div>
      <!--重复数据导出  tab-->
      <div class="del_btn" v-show="showDel">
        <el-button type="danger" class="primary_btn fr" @click="delImportTask">{{$t('public.delete')}}</el-button>
        <el-button type="primary" v-if="showExportBtn" style="margin-right: 8px"  class="primary_btn fr" @click="handleExportRepeatCus">{{$t('public.export')}}</el-button>
        <!-- 隐藏，客户导入（0217）的需求 -->
        <!-- <el-button v-if="activeName === 'falseDataState' && tableDataInvalid.length > 0" type="primary primary_btn fr" style="margin-right: 10px;" @click="handleExportRepeatData">{{$t('public.export')}}</el-button> -->
      </div>
      <el-tab-pane :label="$t('config.customer.importData')" name="trueDataState">
        <div class="table-wrap">
          <div class="deploy">
            <Pagination
              class="fr"
              :small="true"
              :currentPage="currentPage"
              :count="countImport"
              @turnPage="handleCurrentChangeImport"
              :totalPage="Math.ceil(countImport/pageSize)"
            >
            </Pagination>
          </div>
          <el-table
            v-if="!trueDateLoading"
            size="mini"
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="name"
              :label="$t('public.customerName')"
              width="150">
            </el-table-column>
            <el-table-column
              prop="phone"
              :label="$t('public.phoneNum')"
              :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
              prop="status"
              :label="$t('public.state')"
              width="150">
            </el-table-column>
            <el-table-column
              prop="custsource1"
              :label="$t('customer.changeLogFrom')"
              width="150">
            </el-table-column>
          </el-table>
          <div style="height: 200px;" v-if="trueDateLoading" v-loading="trueDateLoading">
          </div>
        </div>
      </el-tab-pane>
      <!--重复数据  tab-->
      <el-tab-pane :label="$t('config.customer.duplicateData')" name="falseDataState">
        <div class="table-wrap">
          <div class="deploy">
            <Pagination
              class="fr"
              :small="true"
              :currentPage="currentPage2"
              :count="countReapet"
              @turnPage="handleCurrentChange"
              :totalPage="Math.ceil(countReapet/pageSize)"
            >
            </Pagination>
          </div>
          <el-table
            v-if="!falseDateLoading"
            size="mini"
            :data="tableDataInvalid"
            stripe
            style="width: 100%">
            <el-table-column
              prop="name"
              :label="$t('public.customerName')"
              width="150">
              <template scope="scope">
                <span :style="{ 'color': scope.row.reason === 'name' ? '' : '' }">
                  {{ scope.row.name }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="phone"
              :label="$t('public.phoneNum')"
              :show-overflow-tooltip="true"
              min-width="200">
              <template scope="scope">
                <span :style="{ 'color': scope.row.reason === 'phone' ? '' : '' }">
                  {{ scope.row.phone }}
                </span>
              </template>
            </el-table-column>
            <!-- 隐藏，客户导入（0217）的需求 -->
            <!-- <el-table-column
              prop="importSid"
              :label="$t('public.importSid')"
              min-width="150">
              <template scope="scope">
                <span :style="{ 'color': scope.row.reason === 'importSid' ? '' : '' }">
                  {{ scope.row.importSid }}
                </span>
              </template>
            </el-table-column> -->
            <el-table-column
              prop="status"
              :label="$t('public.state')"
              width="150">
            </el-table-column>
            <el-table-column
              prop="custsource1"
              :label="$t('customer.changeLogFrom')"
              width="150">
            </el-table-column>
          </el-table>
          <div style="height: 200px" v-if="falseDateLoading" v-loading="falseDateLoading">
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  import { isHasMenu } from '@/utils/m7Utils'
  export default {
    name: 'customerImportDetail',
    data () {
      return {
        batchNo: '',
        tableDataInvalid: [],
        source: [],
        tableData: [],
        activeName: 'trueDataState',  //   tab  name
        loading: true,
        falseDateLoading: false,
        trueDateLoading: false,
        pageSize: 10,
        currentPage: 1,
        currentPage2: 1,
        id: '',
        countImport: 0,
        countReapet: 0,
//        showDel: false,
        currSessionId: ''
      }
    },
    computed: {
      showDel () {
        return this.$store.state.config.customerConfig.currentRightDetial && (this.$store.state.config.customerConfig.currentRightDetial.flag === 'finish' || this.$store.state.config.customerConfig.currentRightDetial.flag === 'failure')
      },
      showExportBtn () {
        return this.activeName === 'falseDataState'
      }
    },
    methods: {
      handleImportData (data, flag) {
        let sourceName = ''
        let tableData1 = []
        let list = data
        for (var i in list) {
          for (var j in this.source) {
            if (list[i].custsource1 === this.source[j].key) {
              sourceName = this.source[j].name
            }
          }
          let phone = []
          if (list[i].phone) {
            let phoneList = list[i].phone
            phoneList.forEach((item) => {
              phone.push(item.tel)
            })
          }
          let status = this.$t('config.customer.statusDel')
          if (this.$getCache('custTmpls')[0].status[list[i].status] && this.$getCache('custTmpls')[0]) {
            status = this.$getCache('custTmpls')[0].status[list[i].status]
          }
          let obj = {
            name: list[i].name,
            custsource1: sourceName,
            status: status,
            phone: phone.toString(),
            // 隐藏，客户导入（0217）的需求
            // importSid: list[i].importSid || '',
            // reason: list[i].reason,
          }
          tableData1.push(obj)
        }
        if (flag) {
          this.tableData = tableData1
        } else {
          this.tableDataInvalid = tableData1
        }
      },
//        tab切换
      handleClick (tab, event) {
        if (tab.name === 'trueDataState') {
          this.currentPage = 1
          this.searchTrueData()
        } else if (tab.name === 'falseDataState') {
          this.currentPage2 = 1
          this.searchFalseData()
        }
      },
//       查询导入数据方法
      searchTrueData () {
        if (!this.id) {
          return
        }
        this.trueDateLoading = true
        this.$store.dispatch('queryTaskImport1', {batchNo: this.id, page: this.currentPage}).then((resp) => {
          this.trueDateLoading = false
          let list = resp.list ? resp.list : []
          this.countImport = resp.count
          if (list) {
            this.handleImportData(list, true)
          }
        })
      },
//       查询重复数据方法
      searchFalseData () {
        if (!this.id) {
          return
        }
        this.falseDateLoading = true
        this.$store.dispatch('queryTaskRepeat', {batchNo: this.id, page: this.currentPage2, limit: this.pageSize}).then((resp) => {
          this.falseDateLoading = false
          this.countReapet = resp.count
          if (resp.list) {
            this.handleImportData(resp.list, false)
          }
        })
      },
//      分页查询 导入数据分页
      handleCurrentChangeImport (val) {
        this.currentPage = val
        this.searchTrueData()
      },
//      分页查询 错误数据分页
      handleCurrentChange (val) {
        this.currentPage2 = val
        this.searchFalseData()
      },
//      初始化数据
      fetchData () {
        this.loading = true
        this.activeName = 'trueDataState'
        let query = this.$route.query
        this.id = query.batchNo
        if (!this.id) {
          this.loading = false
          return
        }
        this.$store.dispatch('queryTaskImport1', {batchNo: this.id, page: this.currentPage}).then((resp) => {
          this.loading = false
          let list = resp.list ? resp.list : []
          this.countImport = resp.count
          if (list) {
            this.handleImportData(list, true)
          }
        })
      },
//      删除导入批次
      delImportTask () {
        this.$confirm(this.$t('configLazyLoad.customerConfig.tip2'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('delCustomeImpTask', {_id: this.$store.state.config.customerConfig.currentRightDetial._id}).then((res) => {
            if (res && res.success) {
              this.$message({
                type: 'success',
                message: this.$t('configLazyLoad.customerConfig.tip3')
              })
              let refreshLeft = {
                batchNo: this._id,
                flag: 'deletRefreshLeft'
              }
              this.$store.commit('config/customer/REFRESH_LEFT', refreshLeft)
//              this.$router.push('/index/config/customerConfig/import')
              this.$router.push('/index/config/customerConfig/import/addCustomerTemplate')
            } else {
              this.$message.error(res.message)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
      },
      handleExportRepeatData () {
        if (this.id === '') {
          return
        }
        let data = {
          Method: 'exportCustomerRepeatInfo',
          Query: {
            batchNo: this.id // 批次号
          }
        }
        this.$store.dispatch('exportXls', data).then((res) => {
          if (res.success) {
            this.$message.success(this.$t('webchat.exportSuccess'))
          }
        })
      },
      handleExportRepeatCus () {
        let data = {
          Method: 'exportRepeatCus',
          Query: {
            batchNo: this.id // 批次号
          }
        }
        this.$store.dispatch('exportXls', data).then((res) => {
          if (res.success) {
            this.$message.success(this.$t('webchat.exportSuccess'))
          }
        })
      }
    },
    watch: {
      $route (to, form) {
        if (to.path.split('/')[2] === 'config') {
          this.fetchData()
        }
      }
    },
    beforeMount () {
      this.source = this.$getCache('custTmpls')[0].source
      this.fetchData()
    },
    components: {
      Pagination
    }
  }
</script>
<style lang="stylus" scoped>
  /*@import "../../../../assets/common.styl"*/
  .si-detail
    margin-left 341px
    height calc(100vh - 161px)
    padding-bottom 20px
    overflow auto
    .table-wrap
      padding 0 20px
      margin-top 16px
      .deploy
        height 48px
        line-height 48px
        border 1px solid #ebebeb
        border-bottom none
        padding-left 14px
        .fr
          padding-top 10px
          height 38px
  .del_btn
    overflow: hidden
    margin-bottom: 10px
    margin-top 15px
    margin-right 20px
</style>
